<template>
  <div>
    <p>
      <!--  刷新按钮  -->
      <button class="btn btn-white btn-default btn-round" @click="list(1)">
        <i class="ace-icon fa fa-refresh"></i>
        刷新
      </button> &nbsp;
    </p>

    <!--  增加分页组件  -->
    <pagination ref="pagination" v-bind:list="list"></pagination>

    <!-- PAGE CONTENT BEGINS -->
    <table id="simple-table" class="table  table-bordered table-hover">
      <thead>
      <tr>
        <th>ID</th>
        <th>相对路径</th>
        <th>文件名</th>
        <th>后缀</th>
        <th>大小</th>
        <th>用途</th>
      </tr>
      </thead>

      <tbody>
      <tr v-for="file in files">
        <td>{{ file.id }}</td>
        <td>{{ file.path }}</td>
        <td>{{ file.name }}</td>
        <td>{{ file.suffix }}</td>
        <td>{{ file.size | formatFileSize }}</td>
        <td>{{ FILE_USE | optionKV(file.use)}}</td>
      </tr>
      </tbody>
    </table>
    <!-- PAGE CONTENT ENDS -->

  </div>


</template>

<script>
import Pagination from "../../components/pagination"

export default {
  name: "file-file",
  components: {Pagination},
  mounted: function () {
    let _this = this;
    _this.list(1);
    // 初始化每页显示10条数据
    _this.$refs.pagination.size = 10;

    // 将左侧栏的样式激活
    this.$parent.activeSidebar("file-file-sidebar");
  },
  data: function () {
    return {
    // 用来映射表单的数据
    file: {},
    files: [],
    FILE_USE: FILE_USE,
    }
  },
  methods: {
    list(page) {
      let _this = this;
      // 调用显示延迟框的方法
      Loading.show();
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/file/admin/file/list', {
        page: page,
        size: _this.$refs.pagination.size
      }).then((result) => {
        // 关闭延迟框的显示
        Loading.hide();
        let response = result.data;
        _this.files = response.content.list;
        _this.$refs.pagination.render(page, response.content.total);
      })
    }

  } // methods
};
</script>

<style scoped>

</style>
